<template>
  <div class="page">
    <div id="cash_charts" class="charts-item" :style="{ width: '100%', height: '340px' }"></div>
    <div id="convert_charts" class="charts-item" :style="{ width: '100%', height: '340px', 'margin-top': '50px' }"></div>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" max-height="500">
        <el-table-column prop="date" label="日期" width="120"/>
        <el-table-column prop="totalAmount" label="总金额"/>
        <el-table-column prop="totalOrderCount" label="总订单量"/>
        <el-table-column prop="totalPayUserCount" label="总支付用户数"/>
        <el-table-column prop="averageAmountPerUser" label="客单金额"/>
        <el-table-column prop="averageAmountPerOrder" label="比单金额"/>
        <el-table-column prop="alipayAmount" label="支付宝金额"/>
        <el-table-column prop="alipayOrderCount" label="支付宝订单量"/>
        <el-table-column prop="alipayUserCount" label="支付宝支付用户数"/>
        <el-table-column prop="alipayAmountPercentage" label="支付宝金额占比"/>
        <el-table-column prop="alipayOrderCountPercentage" label="支付宝订单量占比"/>
        <el-table-column prop="wechatAmount" label="微信金额"/>
        <el-table-column prop="wechatOrderCount" label="微信订单量"/>
        <el-table-column prop="wechatUserCount" label="微信支付用户数"/>
        <el-table-column prop="wechatAmountPercentage" label="微信金额占比"/>
        <el-table-column prop="wechatOrderCountPercentage" label="微信订单量占比"/>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onBeforeUnmount, ref} from "vue";
import api from '../../api/index.js'
import * as echarts from "echarts";

const tableData = ref([])
const chartsObj = {}
const initLineCharts = (id, title, xData, seriesData, tooltip) => {
  if (!chartsObj[id]) {
    chartsObj[id] = echarts.init(document.getElementById(id));
  }
  chartsObj[id].setOption({
    title: {
      text: title,
      left: '20%',
    },
    tooltip: tooltip || {
      trigger: 'axis'
    },
    legend: {
      data: seriesData.map((item) => item.name)
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
      axisLabel : { // 坐标轴刻度标签的相关设置。
        interval: 0,
        rotate: '45'
      },
    },
    yAxis: {
      type: 'value'
    },
    series: seriesData,
  });
}
onMounted(() => {
  window.onresize = function () {
    Object.keys(chartsObj).forEach((k) => {
      chartsObj[k] && chartsObj[k].resize();
    })
  }
})
onBeforeUnmount(() => {
  Object.keys(chartsObj).forEach((k) => {
    chartsObj[k] && chartsObj[k].dispose();
  })
})
const getData = async () => {
  try {
    const res = await api.getPaymentData()
    if (res.data && res.data.length) {
      tableData.value = res.data
      const xData = []
      const seriesData1 = [
        {
          name: '总金额',
          type: 'line',
          color: '#f54e06',
          data: []
        },{
          name: '支付宝金额',
          type: 'line',
          color: '#0674f5',
          data: []
        },{
          name: '微信金额',
          type: 'line',
          color: '#13c50c',
          data: []
        },
      ]

      res.data.forEach((data) => {
        xData.push(data.date)
        seriesData1[0].data.push(data.totalAmount)
        seriesData1[1].data.push(data.alipayAmount)
        seriesData1[2].data.push(data.wechatAmount)
        data.alipayAmountPercentage += '%'
        data.alipayOrderCountPercentage += '%'
        data.wechatAmountPercentage += '%'
        data.wechatOrderCountPercentage += '%'
      })
      initLineCharts('cash_charts', '收入数据', xData, seriesData1)
    }
  } catch(e){}
}
getData()
const getConvertData = async () => {
  try {
    const res = await api.getConvertData()
    if (res.data && res.data.length) {
      const xData = []
      const seriesData1 = [
        {
          name: '总转化率',
          type: 'line',
          color: '#f54e06',
          data: []
        },{
          name: 'plus转化率',
          type: 'line',
          color: '#0674f5',
          data: []
        },{
          name: 'pro转换率',
          type: 'line',
          color: '#13c50c',
          data: []
        },
      ]

      res.data.forEach((data) => {
        xData.push(data.dataDate)
        seriesData1[0].data.push(data.uvToPlusRate + data.uvToProRate)
        seriesData1[1].data.push(data.uvToPlusRate)
        seriesData1[2].data.push(data.uvToProRate)
      })
      initLineCharts('convert_charts', '转化数据', xData, seriesData1, {
        trigger: 'axis',
        formatter: '{b}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%'
      })
    }
  } catch(e){}
}
getConvertData()
</script>

<style scoped lang="scss">
.page{
  position: relative;
  height: 100%;
}
.table-box{
  position: relative;
  padding-bottom: 20px;
}
</style>
